<template>
  <el-card>
    <el-button v-has-perm="['menu:add']" type="primary" icon="el-icon-plus" @click="handleCreate" id="add-btn">
      新增
    </el-button>

    <el-table v-loading="listLoading" :data="tree" row-key="menuId" default-expand-all highlight-current-row>
      <el-table-column label="菜单名称" prop="menuName" />
      <el-table-column label="菜单权限" align="center" prop="permission" />
      <el-table-column label="排序" align="center" prop="menuSort" />
      <el-table-column label="路由地址" align="center" prop="routePath" />
      <el-table-column label="路由名称" align="center" prop="routeName" />
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column label="操作" align="center">
        <template v-slot="{ row }">
          <el-button v-has-perm="['menu:edit']" size="mini" type="text" @click="handleUpdate(row)">
            编辑
          </el-button>
          <!--          <el-button v-has-perm="['menu:delete']" size="mini" type="text" @click="handleDelete(row.menuId)">-->
          <!--            删除-->
          <!--          </el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="right"
        style="margin: 0 auto"
      >
        <el-form-item label="菜单类型" prop="menuType">
          <el-radio-group v-model="temp.menuType">
            <el-radio-button :label="0">目录</el-radio-button>
            <el-radio-button :label="1">页面</el-radio-button>
            <el-radio-button :label="2">按钮</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="temp.menuName" placeholder="菜单名称" />
        </el-form-item>
        <el-form-item label="菜单权限" prop="permission">
          <el-input v-model="temp.permission" placeholder="菜单权限" />
        </el-form-item>
        <el-form-item v-if="temp.menuType!==2" label="路由地址" prop="routePath">
          <el-input v-model="temp.routePath" placeholder="路由地址" />
        </el-form-item>
        <el-form-item v-if="temp.menuType!==2" label="路由名称" prop="routeName">
          <el-input v-model="temp.routeName" placeholder="路由名称" />
        </el-form-item>
        <el-form-item v-if="temp.menuType!==0" label="父级菜单" prop="parentId">
          <el-select v-model="temp.parentId" filterable placeholder="父级菜单">
            <el-option
              v-for="item in parentList"
              :key="item.menuId"
              :label="item.menuName"
              :value="item.menuId"
              :disabled="item.menuId===temp.menuId"
            >
              <span style="float: left">{{ item.menuName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.permission }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="temp.menuType!==2" label="图标名称" prop="iconName">
          <el-input v-model="temp.iconName" placeholder="图标名称" />
        </el-form-item>
        <el-form-item label="显示顺序" prop="menuSort">
          <el-input-number v-model="temp.menuSort" placeholder="显示顺序" />
        </el-form-item>
        <el-form-item v-if="temp.menuType!==2" label="页面缓存" prop="cached">
          <el-switch v-model="temp.cached" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">
          确认
        </el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import Pagination from "@/components/Pagination/index"
import MenuApi from "@/api/MenuApi"

export default {
  name: "MenuPage",
  components: { Pagination },
  data() {
    return {
      list: [],
      tree: [],
      listLoading: true,
      textMap: {
        update: "编辑",
        create: "新增"
      },
      dialogStatus: "",
      temp: {},
      dialogVisible: false
    }
  },
  created() {
    this.getList()
  },
  computed: {
    parentList() {
      switch (this.temp.menuType) {
        case 1:
          return this.list.filter(i => i.menuType === 0)
        case 2:
          return this.list.filter(i => i.menuType === 1)
        default:
          return []
      }
    },
    rules() {
      let rules = {
        menuName: [{ required: true, message: "请输入菜单名称！", trigger: "blur" }],
        routePath: [{ required: true, message: "请输入路由地址！", trigger: "blur" }],
        routeName: [{ required: true, message: "请输入路由名称！", trigger: "blur" }]
      }
      if (this.temp.menuType === 2) {
        delete rules.routePath
        delete rules.routeName
      }
      return rules
    }
  },
  methods: {
    getList() {
      this.listLoading = true
      MenuApi.listAndTree().then(result => {
        let list = result.data[0].list
        this.list = list
        this.tree = result.data[0].tree
        let map = {}
        list.forEach(i => {
          map[i.menuId] = i.menuName
        })
        this.listLoading = false
      })
    },
    resetTemp() {
      this.temp = {
        menuType: 0
      }
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = "create"
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate()
      })
    },
    createData() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          MenuApi.save(this.temp).then(() => {
            this.$message.success("添加成功！")
            this.getList()
            this.dialogVisible = false
          })
        }
      })
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row)
      this.dialogStatus = "update"
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate()
      })
    },
    updateData() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          MenuApi.update(this.temp).then(() => {
            this.dialogVisible = false
            this.getList()
            this.$message.success("修改成功！")
          })
        }
      })
    },
    handleDelete(id) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        MenuApi.delete(id).then(() => {
          this.dialogVisible = false
          this.$message.success("操作成功！")
        })
      })
    }
  }
}
</script>
<style scoped lang="scss">
#add-btn {
  margin-bottom: 15px;
}

::v-deep .el-form-item__label {
  width: 90px;
}

::v-deep .el-input, .el-input-number {
  width: 320px;
}

::v-deep .el-dialog {
  width: 500px;
}
</style>
